<template>
  <el-card class="midCard">
    <div class="tab-change">
      <div
        v-for="item in tabs"
        :key="item.id"
        :class="{active:item.id===currentItem}"
        class="tab-item"
        @click="changeItem(item.id)"
      >
        <span v-if="Object.keys(statusCount).length">{{ item.id===null?item.item+all:item.item+(statusCount[item.id] || 0) }}</span>
        <span v-else>{{ item.item }}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: null
    },
    statusCount: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      currentItem: null
    }
  },
  computed: {
    all() {
      return Object.values(this.statusCount).reduce((prev, item) => prev + +item, 0) || ''
    }
  },
  methods: {
    changeItem(id) {
      this.currentItem = id
      this.$emit('changeItem', id)
    }
  }

}
</script>

<style lang="scss" scoped>
.midCard{
  ::v-deep .el-card__body{
    padding: 0;
  }
  .tab-change{
  display: flex;
  .tab-item{
    width: 120px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    &.active{
     background-color: #ffeeeb;
     color: #e15536;
    }
  }
}
}

</style>
